<template>
  <div>
    <!-- 申报信息 -->
    <el-dialog title="修改信息" :visible.sync="isSelect" width="40%" destroy-on-close :show-close="false">
      <div class="programme-box">
        <div class="programme-box-item" v-for="(item, index) in programmeForm" :key="index">
          <span class="programme-box-item-title">订单编号：{{ item.child_order_id }}</span>
          <el-form :model="item" :ref="'programmeForm' + index" label-width="120px">
            <el-form-item
              label="申报中文名称"
              prop="category_cn_desc"
              :rules="[
              { required: true, message: '申报中文名称不能为空', trigger: 'blur' },
              { min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }
            ]"
            >
              <el-input
                v-model="item.category_cn_desc"
                maxlength="20"
                show-word-limit
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="申报英文名称"
              prop="category_en_desc"
              :rules="[
              { required: true, message: '申报英文名称不能为空', trigger: 'blur' },
              { min: 0, max: 60, message: '长度在 0 到 60 个字符', trigger: 'blur' }
            ]"
            >
              <el-input
                v-model="item.category_en_desc"
                maxlength="60"
                show-word-limit
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              label="产品申报金额"
              prop="product_declare_amount"
              :rules="[
              { required: true, message: '产品申报金额不能为空', trigger: 'blur' },
              { pattern: /^((0\.\d?[1-9])|(0\.[1-9]0)|([1-9]\d{0,3}(\.\d{1,2})?)|(10000(\.0{1,2})?))$/,message: '0.01-10000.00之间', trigger: 'blur' }
            ]"
            >
              <el-input v-model="item.product_declare_amount" type="number" style="width: 200px" clearable>
                <template slot="append">$</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="programme-box-flex">
        <el-button type="primary" @click="programmeSubmit(logisticsInfo.serviceType)" :loading="proButtonLoading"
                   :disabled="proButtonLoading">提交
        </el-button>
        <el-button @click="closeOnlineLogistics">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  createAeWarehouseOrder, createOtherWarehouseOrder, synchronizationWarehouseOrder
} from "@/api/order/purchaser"

export default {
  name: 'order-list',
  props: {
    //线上发货物流信息
    logisticsInfo: {},
    programmeForm: {
      type: Array,
      default: []
    },
    //是否打开线上发货物流信息
    isOpenOnlineShipment: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isSelect: true,//是否显示提交物流方案信息弹窗
      proButtonLoading: false,//提交物流方案信息按钮loading
      dialogTitle: '订单详情',//弹出框标题
      title: '订单详情',
      orderDetailForm: '',//订单详情
      warehouseCarrierService: "",
    }
  },
  created() {
  },
  methods: {
    closeOnlineLogistics() {
      this.$emit('reportInfoSwitch', false)
    },
    // 确认发货
    programmeSubmit(type) {
      this.$refs["programmeForm0"][0].validate(valid => {
        console.log('valid', valid)
        if (valid) {
          this.proButtonLoading = true;
          if (type == "CAINIAO") {
            this.createAeWarehouseOrder()
          } else if (type == "OTHER") {
            this.createOtherWarehouseOrder()
          } else if (!this.logisticsInfo.logisticsServiceId) { //同步线上物流订单
            let data = {
              orderId: this.logisticsInfo.orderId,
              sellerLoginId: this.logisticsInfo.sellerLoginId,
              declareProductInfo: this.programmeForm
            }
            synchronizationWarehouseOrder(data).then(res => {
              this.$message.success(res.msg)
              this.closeOnlineLogistics()
            })
          }
        }
      })
    },
    // 菜鸟发货
    createAeWarehouseOrder() {
      const params = {
        orderId: this.logisticsInfo.orderId,
        logisticsServiceId: this.logisticsInfo.logisticsServiceId,
        sellerLoginId: this.logisticsInfo.sellerLoginId,
        declareProductInfo: this.programmeForm
      }
      createAeWarehouseOrder(params).then(res => {
        this.$message.success(res.msg);
        this.proButtonLoading = false;
        this.closeOnlineLogistics()
      }).catch(() => {
        this.proButtonLoading = false;
        this.isSelect = false;
        this.closeOnlineLogistics()
      })
    },
    // 其他方式发货
    createOtherWarehouseOrder() {
      const params = {
        orderId: this.logisticsInfo.orderId,
        warehouseCarrierService: this.warehouseCarrierService
      }
      createOtherWarehouseOrder(params).then(res => {
        this.$message.success(res.msg);
        this.proButtonLoading = false;
        this.closeOnlineLogistics()
      }).catch(() => {
        this.proButtonLoading = false;
        this.isSelect = false;
      })
    }
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
